<template>
	<view class="profile-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left"></view>
			<text class="nav-title">个人中心</text>
			<view class="nav-right"></view>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar || '/static/个人头像.png'" @click="changeAvatar"></image>
				<view class="user-details">
					<text class="user-name">{{ userInfo.name || '用户' }}</text>
					<text class="user-role">{{ userInfo.role || '维修员' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="changePassword">
				<view class="menu-icon">🔒</view>
				<text class="menu-text">密码修改</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="userSettings">
				<view class="menu-icon">⚙️</view>
				<text class="menu-text">个人设置</text>
				<text class="menu-arrow">></text>
			</view>
			
			<view class="menu-item" @click="aboutApp">
				<view class="menu-icon">ℹ️</view>
				<text class="menu-text">关于应用</text>
				<text class="menu-arrow">></text>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { getUserInfo, logout } from '../../utils/auth.js'
	
	export default {
		data() {
			return {
				userInfo: {}
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				const userInfo = getUserInfo();
				if (userInfo) {
					this.userInfo = userInfo;
				} else {
					// 如果没有用户信息，跳转到登录页
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			},
			
			
			// 更换头像
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 这里可以上传头像到服务器
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '选择头像失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 修改密码
			changePassword() {
				uni.navigateTo({
					url: '/pages/user/change-password'
				});
			},
			
			// 个人设置
			userSettings() {
				uni.showToast({
					title: '个人设置功能开发中',
					icon: 'none'
				});
			},
			
			// 关于应用
			aboutApp() {
				uni.showModal({
					title: '关于应用',
					content: '智能维护系统 v1.0.0\n\n让设备维护更简单',
					showCancel: false
				});
			},
			
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '确认退出',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 调用退出登录方法
							logout();
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f7;
	}
	
	.status-bar {
		height: 64rpx;
	}
	
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		background-color: white;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 36rpx;
		color: #333;
	}
	
	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		width: 60rpx;
	}
	
	.user-card {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-info {
		display: flex;
		align-items: center;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
		background-color: #f0f0f0;
	}
	
	.user-details {
		flex: 1;
	}
	
	.user-name {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.user-role {
		display: block;
		font-size: 28rpx;
		color: #666;
	}
	
	.menu-section {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.menu-item:last-child {
		border-bottom: none;
	}
	
	.menu-icon {
		font-size: 36rpx;
		margin-right: 30rpx;
		width: 40rpx;
		text-align: center;
	}
	
	.menu-text {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}
	
	.menu-arrow {
		font-size: 28rpx;
		color: #999;
	}
	
	.logout-section {
		padding: 40rpx 30rpx;
	}
	
	.logout-btn {
		width: 100%;
		height: 100rpx;
		background-color: #ff4444;
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 20rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
